
.onboarding {

  .engines-grid {
    
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0rem 4rem;
    
    .engine {

      display: flex;
      align-items: center;
      padding: 0rem;
      gap: 2rem;

      .brand {
        width: 4rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;

        .logo {
          width: 2rem;
        }

        span {
          font-size: 14.5px;
        }
      }

      .config {
        
        width: 250px;
        padding-top: 0.5rem;

        .loader {
          margin: 0 0.25rem;
          opacity: 0.75;
          width: 0.375rem;
          height: 0.375rem;
        }

        span {
          
          font-size: 0.8rem;
          height: 30px;

          .spinner {
            margin-left: 0.5rem;
          }

          &.status {
            color: var(--faded-text-color);
          }

          &.success {
            color: green;
          }

          &.error {
            color: red;
          }

        }

      }

      &:deep() input {
        width: 250px !important;
      }
      
    }

  }

}
